<template>
  <div class="form-container">
    <a-form-item
      label="Residential Address"
      :colon="false"
      class="residential-address"
    />

    <a-form-item
      label="Unit:"
      :colon="false"
    >
      <a-input
        v-decorator.trim="[
          'unit',
          {
            initialValue: currentUser.unit,
            rules: [
              formRules.required('Incorrect unit invalid'),
            ],
            validateTrigger: 'change'
          }
        ]"
        type="text"
        placeholder="Unit"
      />
    </a-form-item>

    <a-form-item
      label="Street Address:"
      :colon="false"
    >
      <!-- rules: [
              formRules.required('Incorrect street address invalid'),
            ], -->
      <a-input
        v-decorator.trim="[
          'street',
          {
            initialValue: currentUser.street,
            validateTrigger: 'change'
          }
        ]"
        type="text"
        placeholder="Street Address"
      />
    </a-form-item>

    <a-form-item
      label="Suburb:"
      :colon="false"
    >
      <!-- <a-input
        v-decorator.trim="[
          'districtAndZipCode',
          {
            rules: [
              formRules.required('Incorrect district and zip Code invalid'),
            ],
            validateTrigger: 'change'
          }
        ]"
        type="text"
        placeholder="District And Zip Code"
      /> -->
      <a-input
        v-decorator.trim="[
          'district',
          {
            initialValue: currentUser.district,
            rules: [
              formRules.required('Incorrect suburb invalid'),
            ],
            validateTrigger: 'change'
          }
        ]"
        type="text"
        placeholder="Suburb"
      >
      </a-input>
    </a-form-item>

    <a-form-item
      style="margin-bottom:0;"
      :wrapper-col="{ span: 24 }"
    >
      <a-form-item
        :label-col="{ span: 14 }"
        :wrapper-col="{ span: 10 }"
        label="State:"
        :colon="false"
        :style="{ display: 'inline-block', width: 'calc(55% - 20px)', 'margin': '0 20px' }"
        class="form-item-col"
      >
        <a-input
          v-decorator.trim="[
            'state',
            {
              initialValue: currentUser.state,
              rules: [
                formRules.required('Incorrect state invalid'),
              ],
              validateTrigger: 'change'
            }
          ]"
          placeholder="State"
        >
        </a-input>
      </a-form-item>

      <a-form-item
        label="Post Code:"
        :colon="false"
        :style="{ display: 'inline-block', width: 'calc(45% - 20px)' }"
        class="form-item-col"
        :label-col="{ span: 14 }"
        :wrapper-col="{ span: 10 }"
      >
        <a-input
          v-decorator.trim="[
            'post_code',
            {
              initialValue: currentUser.post_code,
              rules: [
                formRules.required('Incorrect post code invalid'),
                {
                  len: 4,
                  message: 'Incorrect post code invalid!'
                }
              ],
              validateFirst: true,
              validateTrigger: 'change'
            }
          ]"
          type="number"
          placeholder="Post Code"
        />
      </a-form-item>
    </a-form-item>
  </div>
</template>

<script>
import formRules from '@/utils/form/rules';
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      formRules,
      widget: null
    };
  },

  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },

  computed: {
    ...mapGetters(['currentUser'])
  },
  
  mounted() {
    const script = document.createElement("script");
    script.setAttribute(
      "src",
      "https://api.addressfinder.io/assets/v3/widget.js"
    );
    script.setAttribute("async", true);
    script.onload = () => {
      this.widget = new window.AddressFinder.Widget(
        document.getElementById("unit"),
        "REFPGXKTJYHAQN6489CW",
        "AU",
        {
          address_params: {
            "address_params": {
              "gnaf": "1"
            },
            "empty_content": "No addresses were found. This could be a new address, or you may need to check the spelling. Learn more"
          }
        }
      );

      console.log(this.widget, window.AddressFinder, 'daasd')
      this.widget.on("result:select", (fullAddress, metaData) => {
        this.form.setFieldsValue({
          unit: metaData.address_line_1,
          street: metaData.address_line_2,
          district: metaData.locality_name,
          state: metaData.state_territory,
          post_code: metaData.postcode,
        });
        // document.getElementById("addrs_1").value = metaData.address_line_1;
        // document.getElementById("addrs_2").value = metaData.address_line_2;
        // document.getElementById("suburb").value = metaData.locality_name;
        // document.getElementById("state").value = metaData.state_territory;
        // document.getElementById("postcode").value = metaData.postcode;
      });
    };
    document.head.appendChild(script);
  },
};
</script>